<template>
  <div class="login-page">
    <div class="login-form">
      <img
        class="login-logo"
        src="https://img2.baidu.com/it/u=1117130374,3230014067&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800"
        alt=""
      />
      <el-form :model="form" ref="fff" :rules="rules">
        <!-- 用户名输入文本框 -->
        <el-form-item prop="loginName">
          <span class="svg-container">
            <i class="el-icon-mobile-phone"></i>
          </span>
          <el-input placeholder="请输入用户名" v-model="form.loginName" />
        </el-form-item>
        <!-- 密码输入文本框 -->
        <el-form-item prop="password">
          <span class="svg-container">
            <i class="el-icon-lock"></i>
          </span>
          <el-input show-password type="password" placeholder="请输入密码：" v-model="form.password" />
          <!-- <span class="show-pwd">
            <i v-show="a"  @click="passwordType" class="el-icon-arrow-down"></i>
            <i v-show='!a' @click="passwordType" class="el-icon-search"></i>
          </span> -->
        </el-form-item>
        <!-- 验证码输入文本框 -->
        <el-form-item prop="code">
          <el-col :span="17">
            <span class="svg-container">
              <i class="el-icon-key"></i>
            </span>
            <el-input v-model="form.code" placeholder="请输入验证码" />
          </el-col>
          <el-col :span="7">
            <img @click="getCode" class="ps" :src="src" alt="" />
          </el-col>
        </el-form-item>
        <el-form-item class="tc">
          <el-button style="width: 100%" @click="login" type="primary"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { imageCode, login } from '@/api/user.js'
export default {
  name: 'login-page',
  data () {
    return {

      src: '',
      form: {
        account: '',
        mobile: '',
        loginType: 0,
        loginName: 'admin',
        password: 'admin',
        code: '',
        clientToken: ''
      },
      clientToken: '',
      rules: {
        code: [{ required: true }],
        loginName: [
          {
            required: true,
            message: '请输入用户名',
            trigger: ['blur', 'change']
          },
          {
            min: 5,
            max: 11,
            message: '长度5~11哦',
            trigger: ['blur', 'change']
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: ['blur', 'change']
          },
          {
            pattern: /^\w{5,11}$/,
            message: '长度5~11哦',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },

  async created () {
    // 当刚进入页面的时候自动获取验证码图片进行图片渲染
    this.getCode()
  },
  methods: {
    // 当点击图片的时候get请求获取验证码然后进行渲染图片
    async getCode () {
      const res = await imageCode()
      this.clientToken = res.config.url.slice(33, 42)
      console.log(res.config.url.slice(33, 42))
      this.src = `data:image/png;base64,${btoa(
        new Uint8Array(res.data).reduce(
          (data, byte) => data + String.fromCharCode(byte),
          ''
        )
      )}`
    },

    // 登录页面
    async login () {
      try {
        const valid = await this.$refs.fff.validate()
        if (valid) {
          this.form.clientToken = this.clientToken
          const { data: { token } } = await login(this.form)
          // console.log(res)
          console.log(token)
          this.$store.commit('user/setUserToken', token)
          this.$router.push('/')
        }
      } catch (e) {
        console.error(e)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.show-pwd {
  position: absolute;
  right: 10px;
  top: 7px;
  font-size: 16px;
  color: #889aa4;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.ps {
  width: 100%;
  // height: 100%;
  height: 47px;
}
::v-deep .el-input__inner {
  // height: 50px;
  // height: 52px;
  border: 0;
  padding: 0;
}
i {
  font-size: 18px;
}
.svg-container {
  padding: 6px 0px 6px 10px;
  color: #889aa4;
  vertical-align: middle;
  width: 30px;
  display: inline-block;
}
.login-page {
  position: relative;
  min-height: 100vh;
  background: url(@/assets/bgc1.webp) no-repeat center / cover;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: space-around;
  .login-form {
    position: absolute;
    width: 470px;
    height: 300px;
    top: 50%;
    left: 50%;
    margin-top: -194px;
    margin-left: -259px;
    padding: 76px 35px 0;
    background: #fff;
    -webkit-box-shadow: 0 3px 70px 0 rgba(30, 111, 72, 0.35);
    box-shadow: 0 3px 70px 0 rgba(30, 111, 72, 0.35);
    border-radius: 10px;
  }
  .login-logo {
    position: absolute;
    width: 96px;
    height: 96px;
    top: -46px;
    left: 50%;
    margin-left: -48px;
    border-radius: 100%;
    box-shadow: 0px 5px 10px #888888;
  }
  form {
    display: block;
    margin-top: 0em;
  }

  .el-form-item {
    width: 100%;
    height: 47px;
    margin-bottom: 24px;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
  }
  .el-form-item__content {
    line-height: 40px;
    position: relative;
    font-size: 14px;
    height: 60px;
  }
  [class*="el-col-"] {
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .el-input {
    border: none !important;
    box-shadow: none !important;
    display: inline-block;
    height: 47px;
    width: 85%;
    border: 0;
  }
  .tc {
    text-align: center;
  }
}
</style>
